<!--
 * @Date: 2022-01-10 16:18:25
 * @LastEditors: 春贰
 * @Desc: 
 * @LastEditTime: 2022-07-08 09:50:30
 * @FilePath: \web\src\view\system\databackup\modal\add.vue
-->
<template>
  <a-modal
    :visible="visible"
    :title="t('add')"
    :cancelText="t('cancel')"
    :okText="t('submit')"
    @ok="submit"
    @cancel="cancel()"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="desc" :label="t('desc')" name="desc"
        ><a-input v-model:value="formState.desc" />
      </a-form-item>
     
      <a-form-item ref="type" :label="t('type')" name="type"
        ><a-select v-model:value="formState.type" placeholder="please select">
          <a-select-option value="sys">{{ t("base system") }}</a-select-option> 
          <a-select-option value="emsdata">{{ t("ems data") }}</a-select-option> 
          <a-select-option value="emsconfig">{{ t("ems config") }}</a-select-option> 
          <a-select-option value="diy">{{ t("diy tables") }}</a-select-option>
        </a-select></a-form-item
      >
       <a-form-item v-if="formState.type=='diy'" ref="tables" :label="t('tables')" name="tables"
        > <a-select
    v-model:value="formState.tables"
    mode="multiple"
    :placeholder="t('chose tables')"
    style="width: 100%"
    @change="tablesChange"
    :labelInValue="false"
    :options="filteredOptions.map(item => ({ value: item}))"
  > 
  
  </a-select>
       </a-form-item>
       
    </a-form>
  </a-modal>
</template>
<script>
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { add, tables } from "@/core/api/module/SysDatabackup";
import { defineComponent, reactive,computed, ref, toRaw, watch, onMounted } from "vue";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
  },
  emit: ["close"],
  setup(props, context) {
    const { t } = useI18n();
    const state = reactive({
      depts: [],
      showPath: true,
      allTables:[]
    });

    const formRef = ref();
    const filteredOptions =  ref([]);
    const formState = reactive({
      tables: [],
    });

    onMounted(async () => {
      const re_tables = await tables();   
       filteredOptions.value = re_tables.data
       state.allTables =  re_tables.data 
    });

    const tablesChange = (e)=>{  
         filteredOptions.value = state.allTables.filter(o => !formState.tables.includes(o))
    }

    const formRules = {
      desc: [
        {
          required: true,
          message: t("desc") + t("must input"),
          trigger: "blur",
        },
      ],
      type: [
        {
          required: true,
          message: t("type") + t("must input"),
          trigger: "blur",
        },
      ],
    };

    const submit = (e) => {
      formRef.value
        .validate()
        .then(() => {
          message.loading({ content: t("loading"), key: "aaa", duration: 0 });
          add(toRaw(formState)).then((response) => {
            if (response.code == 0) {
              message
                .success({ content: t("success"), key: "aaa", duration: 1 })
                .then(() => {
                  cancel(true);
                });
            } else {
              message
                .error({ content: response.msg, key: "aaa", duration: 1 })
                .then(() => {
                  cancel(true);
                });
            }
          });
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    const cancel = (e = false) => {
      formRef.value.resetFields();
      context.emit("close", e);
    };

    return {
      tablesChange,
      filteredOptions,
      t,
      state,
      submit,
      cancel,
      formRef,
      formState,
      formRules,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
  },
});
</script>